Skip to content

Adapt data samples and testing model grid for narrow screens#860

Open
microbit-grace wants to merge 12 commits intoappsfrom
layout
Open

Adapt data samples and testing model grid for narrow screens#860
microbit-grace wants to merge 12 commits intoappsfrom
layout

Conversation

@microbit-grace
Copy link
Copy Markdown

@microbit-grace microbit-grace commented Apr 10, 2026

Fixes #853

  • Horizontally scroll column headings with the content, but stick them on the top when vertically scrolled.
  • Add min width for testing model page code card area so that the code inside is visible.
  • Ensure there's a gap around the grid content and the scroll area in smaller screen sizes.
  • Used portal for close buttons in data samples to simplify use of z-index.
  • Minor improvement in scrolling into view ref element during tour.

but with the right items fixed.

Additionally make the close icons in front of the data samples using portals.
- make the headings scrollable
- ensure code preview has min width
@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 10, 2026

Preview build will be at
https://review-createai.microbit.org/layout/

iPad portrait preview

ScreenRecording_04-14-2026.11-53-12_1.mov

- Use sticky position to keep right items of heading grid on the top right despite horizontal scrolling
- Replace hacky heading grid so that it fills up the width depending on content instead of putting an absolute position line and background
@microbit-grace microbit-grace changed the title [WIP] Adapt data samples and testing model grid for narrow screens Adapt data samples and testing model grid for narrow screens Apr 14, 2026
@microbit-grace microbit-grace marked this pull request as ready for review April 14, 2026 10:56
@microbit-grace microbit-grace requested a review from a team April 14, 2026 10:56
@microbit-grace
Copy link
Copy Markdown
Author

microbit-grace commented Apr 15, 2026

Found an issue: Top toolbar is not reaching the rightest side
Screenshot 2026-04-15 at 09 38 23

Fixed by e81a418

@microbit-grace microbit-grace removed the request for review from a team April 15, 2026 08:38
@microbit-grace microbit-grace marked this pull request as draft April 15, 2026 08:38
@microbit-grace microbit-grace marked this pull request as ready for review April 15, 2026 09:24
It doesn't fix all the issues re the tour popovers being cut off, but it's a small improvement.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant